<template>
	<el-drawer v-model="c_drawer_form" :show-close="false" :before-close="beforeCloseForm" size="50%">
		<template #title>
			<div class="drawer-title">
				<div>
					{{c_drawer_name}}
				</div>
				<el-button type="danger" size="mini" plain @click="beforeCloseForm">我不填了</el-button>
			</div>
		</template>
		<div class="form-box">
			<slot></slot>
		</div>
	</el-drawer>
</template>

<script>
	export default {
		data() {
			return {
				c_drawer_name: this.drawer_name, // 抽屉名称
				c_drawer_form: this.drawer_form
			}
		},
		props: ['drawer_name', 'drawer_form'],
		watch: {
			drawer_name(val) {
				this.c_drawer_name = val;
			},
			drawer_form(val) {
				this.c_drawer_form = val;
			}
		},
		emits: ["getDrawerForm"],
		methods: {
			// 关闭表单
			beforeCloseForm() {
				let self = this;
				self.$confirm('是否要退出表单填写？', '确认信息', {
						distinguishCancelAndClose: true,
						confirmButtonText: '点错了,我还要填',
						cancelButtonText: '退出',
						showClose: false,
						closeOnClickModal: false
					})
					.then(() => {

					})
					.catch(() => {
						self.c_drawer_form = false;
						self.$emit('getDrawerForm', {
							child_drawer_form: self.c_drawer_form
						});
					});
			}
		}
	}
</script>

<style>
</style>
